<template>
    <page class="user" :top="0" :bottom="0">

        <div style="padding-top: 80px;width: 100%;">
            <van-tabs v-model="user.index">
                <van-tab title="登录">
                    <van-cell-group inset>
                        <!-- 输入任意文本 -->
                        <van-field v-model="user.login.loginname" :clearable="true" :maxlength="10" label-width="35px"
                            label="账号" />
                        <!-- 输入密码-->
                        <van-field v-model="user.login.loginpassw" :clearable="true" :maxlength="15" label-width="35px"
                            type="password" label="密码" />
                    </van-cell-group>
                    <div class="userbutt_div">
                        <van-button @click="loginmethod()" class="userbutt" round type="success">登 录</van-button>
                    </div>
                </van-tab>
                <van-tab title="注册">
                    <van-cell-group inset>
                        <!-- 输入账号-->
                        <van-field v-model="user.enroll.enrollname" :clearable="true" :maxlength="10" label-width="45px"
                            label="账号" />
                        <!-- 输入密码-->
                        <van-field v-model="user.enroll.enrollpassw" :clearable="true" :maxlength="15" label-width="45px"
                            type="password" label="密码" />
                        <van-field v-model="user.enroll.enrollphone" type="tel" :clearable="true" :maxlength="11"
                            label-width="45px" label="手机号" />
                    </van-cell-group>
                    <div class="userbutt_div">
                        <van-button @click="enrollmethod()" class="userbutt" round type="success">注 册</van-button>
                    </div>
                </van-tab>
            </van-tabs>
        </div>

    </page>
</template>
 
<script setup lang="ts">
import { usermethod, userlike, useradd } from "@/serve/_";
import { setItem, isPhone } from "@/utils/index";
import { useRouterAction } from "@/utils/router";
import { showSuccessToast, showFailToast } from 'vant';
const { back, push } = useRouterAction()
import { onMounted, reactive, ref, computed, onUnmounted, getCurrentInstance } from "vue";


const user: {
    index: number,
    login: {
        loginname: string,
        loginpassw: string
    },
    enroll: {
        enrollname: string,
        enrollpassw: string,
        enrollphone: string
    }
} = reactive({
    index: 0,
    login: {
        loginname: "",
        loginpassw: ""
    },
    enroll: {
        enrollname: "",
        enrollpassw: "",
        enrollphone: ""
    }
})

onMounted(() => {

})
//登录
let loginmethod = async () => {
    if (user.login.loginname != "" && user.login.loginpassw != "") {
        let res = await usermethod({
            name: user.login.loginname,
            pwd: user.login.loginpassw
        },)

        if (res.length >= 0) {
        showSuccessToast('登录成功');

        setItem("token", res);//添加token
        
        push({ name: "home" })
    }
      }else{
        showFailToast('账号或密码错误');
      }
        
}

//注册
let enrollmethod = async () => {
    let ssa = isPhone(user.enroll.enrollphone)
    if (ssa == true && user.enroll.enrollname != "" && user.enroll.enrollpassw != "") {
        let ress = await useradd({
            name: user.enroll.enrollname,
            pwd: user.enroll.enrollpassw,
            phone: (user.enroll.enrollphone).toString()
        },)//用户注册
        let res = await usermethod({
            name: user.enroll.enrollname,
            pwd: user.enroll.enrollpassw
        },)

        //跳到首页
        showSuccessToast('注册成功');

        setItem("token", res);//添加token

        push({ name: "home" })
        
    }else{
        showFailToast('手机号或账号密码错误');
    }

}




</script>
 
<style scoped lang="less">
@import "@page/user.less";
</style>